<template>
	<view class="app-setting">
<!-- 		<UniNavBar :statusBar="true" :border="false" bgcolor="transparent" leftIcon="back" :fixed="true"  backgroundColor="#ffffff" :title="i18n.myteam" @clickLeft="back"></UniNavBar> -->
		<view class="list">
<!-- 			<view class="header" :class="{ lastColor:lvShow}">
				<view class="head-img">
					<image :src="`../../static/imgs/avatar${avatar}.png`" mode=""></image>
				</view>
				<p class="fonts">{{name1}}</p>
			</view> -->
			<!-- <view class="menuList">
				<view class="item" @tap="toTeam(3)">
					<p :class="{ acolor:lvShow}">{{tdrs}}</p>
					<div>{{i18n.teamUsers}}</div>
				</view>
				<view class="item">
					<p :class="{ acolor:lvShow}">{{yeji}}</p>
					<div>{{i18n.yeji}}</div>
				</view>
			</view> -->
			<view class="level-wrapper">
				<view class="inner-content">
				<scroll-view id="scrollview"  :style="{height:style.contentViewHeight+'px'}"  scroll-y="true" scroll-with-animation="true">
					
						<mix-tree :list="list"></mix-tree>
						<!-- <block v-for="(item,index) in lists" :key="index">
							<view class="team-list">
								<view class="team-list-left">
									<image src="../../static/mix-tree/defaultIcon.png" mode="widthFix" lazy-load></image>
									<view class="team-list-left-item">
										{{item.username}}
									</view>
									<text>{{item.name}}</text>
								</view>
								<view class="team-list-right">
									{{i18n.yeji}}: {{item.yeji?(item.yeji | formatParsefloat):'0'}} USDT
								</view>
								
							</view>
						</block> -->
					
				</scroll-view>
				</view>
			</view>
		</view>
		<load v-if="showLoad"></load>
	</view>
</template>

<script>
	var timer;
	import Load from '../../components/common/load.vue';
	import {pageto, pageback, _updataTabBar, fetch, deterLang, showToast} from "../../common/js/util.js"
	import {mapGetters} from 'vuex';
	import UniNavBar from '@/components/uni-nav-bar/uni-nav-bar.vue'
	import mixTree from '@/components/mix-tree/mix-tree';
	export default{
		data(){
			return{
				showLoad:false,
				list: [],
				lists:[],
				tdrs: 0,
				yeji: 0,
				ztrs: 0,
				avatar: '',
				yeji1: '',
				name1: '',
				freeze1: '',
				row:10,
				page:1,
				style:{
						contentViewWidth:0,
						contentViewHeight:0,
						mitemHeight:0
					}
				}
			},
		created:function(){
			// scrollview
			
			var _this=this
			uni.getSystemInfo({
				success: (resu) => {
					console.log(resu.windowHeight);
					this.style.contentViewHeight = resu.windowHeight -130;
					return
				 	// _this.height=resu.windowHeight-80+'px'
					const query = uni.createSelectorQuery()
					query.select('#scrollview').boundingClientRect()
					query.selectViewport().scrollOffset()
					query.exec(res=>{
						
						// console.log(JSON.stringify(res));
						// console.log(res[0].top);
						this.style.contentViewHeight = resu.windowHeight -100;
					})
				}
			});
			// const res = uni.getSystemInfoSync(); 
			// console.log(uni.getSystemInfoSync());
			// this.style.pageHeight = res.windowHeight;
			// this.style.contentViewHeight = res.windowHeight - uni.getSystemInfoSync().screenWidth+240; //像素
		},
		computed:{
			i18n () {  
				return this.$t('message')
			},
			...mapGetters([
				'getTextArr',
				'getLangType',
				'getLoginInfo',
				'getRequestUrl'
			])
		},
		onLoad(e) {
			// console.log(e);
			// this.avatar = JSON.parse(e.item).avatar ? JSON.parse(e.item).avatar : '';
			// this.yeji1 = JSON.parse(e.item).yeji;
			// this.name1 = JSON.parse(e.item).name;
			// this.freeze1 = JSON.parse(e.item).freeze;
		},
		onShow(){
			uni.setNavigationBarTitle({
				title:this.getLang==1?'我的团队':'My team'
			})
			this.page=1;
			this.lists = [];
			this.team()
			this._getTeamInfo();
			this._getTeam();
		},
		// onPullDownRefresh() {
		// 	this.page =1;
		// 	this.lists =[]
		//     this.team();
		// },
		// onReachBottom() {
		// 	let _self = this
		//     if (timer != null) {
		//         clearTimeout(timer);
		//     }
		//     timer = setTimeout(function() {
		//         _self.moreTeam();
		//     }, 1000);
					
		// 			// 正常应为:
		// 			// _self.getmorenews();
		// },
		methods:{
			back(){
				uni.navigateBack({
					delta:1
				})
			},
			team(){
				let _data = {
					id: this.getLoginInfo.id,
					token: this.getLoginInfo.token,
					lang_type: this.getLangType=='chs'?2:1,
					row:this.row,
					page:this.page
				}
				this.showLoad = true;
				fetch(this.getRequestUrl+'/api/User/myZt', _data, "post")
					.then(res=>{
						this.showLoad = false;
						if(res.data.data.length==0){
							// showToast(this.i18n.nodata)
							return
						}
						if(res.data.code){
							this.page++
							this.lists = res.data.data
							this.lists.forEach((item,index)=>{
								item.freeze = item.freeze+''
								item.yeji2 = item.yeji+''
							})
						}
						
					}).catch(err=>{
						this.showLoad = false;
					})
			},
			moreTeam(){
				let _data = {
					id: this.getLoginInfo.id,
					token: this.getLoginInfo.token,
					lang_type: this.getLangType=='chs'?2:1,
					row:this.row,
					page:this.page
				}
				this.showLoad = true;
				fetch(this.getRequestUrl+'/api/User/myZt', _data, "post")
					.then(res=>{
						this.showLoad = false;
						if(res.data.data.length==0){
							// showToast(this.i18n.nodata)
							return
						}
						if(res.data.code){
							this.page++
							this.lists = this.lists.concat(res.data.data)
							this.lists.forEach((item,index)=>{
								item.freeze = item.freeze+''
								item.yeji2 = item.yeji2+''
							})
						}
						
					}).catch(err=>{
						this.showLoad = false;
					})
			},
			_getTeam() {
				let _data = {
					id: this.getLoginInfo.id,
					token: this.getLoginInfo.token,
					lang_type: this.getLangType=='chs'?2:1
				}
				this.showLoad = true;
				fetch(this.getRequestUrl+'/api/User/two_user', _data, "post")
					.then(res => {
						this.showLoad = false;
						let _tmp = {
								id: this.getLoginInfo.id,
								username: this.getLoginInfo.username,
								name: this.name1,
								yeji: this.yeji1,
								freeze: this.freeze1
							};
						this.list = [_tmp];
						if (res.data.code==1) {
							if (res.data.data.length > 0) {
								this.list = [
									Object.assign(this.list[0], {
										xj: res.data.data
									})
								];
							}
						} else if(res.data.code ==2){
							showToast(res.data.msg)
							uni.navigateTo({
								url:"/pages/new-login/new-login"
							})
						}else {
								// showToast(res.data.msg);
						}
					}).catch(err=>{
						this.showLoad = false;
					})
			},
			_getTeamInfo() {
				let _data =  {
					id: this.getLoginInfo.id,
					token: this.getLoginInfo.token
				}
				this.showLoad = true;
				fetch(this.getRequestUrl+'/api/User/team', _data, 'post') 
					.then(res => {
						this.showLoad = false;
						if (res.data.code) {
							let {tdrs, yeji, ztrs} = res.data.data;
							this.tdrs = tdrs+'';
							this.yeji1 = yeji+'';
							this.ztrs = ztrs+'';
						} else {
							// showToast(res.data.msg);
						}
					}).catch(err=>{
						this.showLoad = true;
					})
			}
		},
		components: {
			mixTree,Load,UniNavBar
		}
	}
</script>

<style lang="scss">
	@import '@/common/scss/variable.scss';
	@import '@/common/scss/global.scss';
	.tab-nav{
		display: flex;
		margin-left: 12%;
		
	}
	page {
		background-color: #f1f1f1;
	}
	.app-setting {
		.list {
			.level-wrapper {
				background-color: #f1f1f1;
				padding-top: 1upx;
				.inner-content {
					width: 750upx;
					background-color: #ffffff;
					border-radius: 10upx;
					margin: 30upx 0 0;
					padding: 40upx;
					padding-left: 0;
					overflow: hidden;
					.team-list{
						display: flex;
						justify-content: space-between;
						align-items: center;
						margin: 0 20upx;
						padding: 50upx 0;
						border-bottom: 1upx solid #efefef;
						.team-list-left{
							flex: 1;
							display: flex;
							align-items: center;
							image{
								width: 26upx;
								height: 26upx;
								margin-right: 8upx;
								opacity: .9;
								flex-shrink: 0;
							}
							.team-list-left-item{
								font-size: 23upx;
								margin-right: 20upx;
							}
							text{
								font-size: 18upx;
								padding: 12upx;
								border-radius: 4upx;
								background-color: #cbecff;
								color: #2085ff;
							}
						}
						.team-list-right{
							text-align: right;
							justify-content: flex-end;
							width: 200upx;
							display: flex;
							align-items: center;
							font-size: 22upx;
						}
					}
				}
			}
			.header{
				display: flex;
				flex-flow:row wrap;
				justify-content: center;
				align-items: center;
				width: 100%;
				height: 268upx;
				background-color: #2daaff;
				&.lastColor{
					background-color: #c4aa6e;
				}
				.head-img{
					width: 144upx;
					height: 144upx;
					background-color: #fff;
					border-radius:72upx;
					text-align: center;
					image{
						width: 92upx;
						height: 137upx;
					}
				}
				.fonts{
					width: 100%;
					text-align: center;
					font-size: 28upx;
					margin-top:-50upx;
					color: #fff;
					font-weight: bold;
				}
			}
			.menuList{
				display: flex;
				flex-direction: row;
				height: 176upx;
				justify-content: space-between;
				align-items: center;
				padding-top:44upx;
				padding-bottom:52upx;
				width: 100%;
				background-color: #ffffff;
				.item{
					flex: 1;
					text-align: center;
					p{
						font-size: 20px;
						color: #2daaff;
						font-weight: bold;
						&.acolor{
							color:#c4aa6e;
						}
					}
					div{
						font-size: 14px;
						margin-top: 10upx;
						color: #929292;
					}
				}
			}
		}
	}
</style>
